<template>
  <div class="user" style="padding: 0px;">
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="优惠券类型">
          <el-select clearable style="width: 180px;" v-model="formInline.couponType" filterable placeholder="请选择优惠券类型" :multiple="false" @change="onSubmit">
            <el-option v-for="item in couponTypeList" :value="item.value" :key="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券名称">
          <el-input v-model="formInline.couponName" placeholder="请输入优惠券名称" @keyup.enter.native="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
          <el-button @click="onReset" icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top:5px;">
      <el-button size="small" style="margin-bottom:10px;" icon="Plus" @click="addClick">添加抵扣券</el-button>
      <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading" stripe>
        <el-table-column prop="couponId" fixed label="优惠券ID" width="100" align="center"></el-table-column>
        <el-table-column prop="couponTypeText" fixed label="优惠券类型" width="100" align="center"></el-table-column>
        <el-table-column prop="name" fixed label="优惠券名称" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="minPrice" label="最低消费金额" min-width="100" align="center"></el-table-column>
        <el-table-column prop="bigPrice" label="最多抵扣金额" min-width="100" align="center">
          <template #default="{ row }">
            <el-col v-if="row.bigPrice == 0.0">无</el-col>
            <el-col v-else>{{ row.bigPrice }}</el-col>
          </template>
        </el-table-column>
        <el-table-column prop="seckillStock" label="优惠方式" min-width="110">
          <template #default="scope">
            <div v-if="scope.row.couponType == 10">
              <span>立减<strong class="orange">{{ scope.row.reducePrice }}</strong>元</span>
            </div>
            <div v-if="scope.row.couponType == 20">
              <span>打<strong class="orange">{{ scope.row.discount / 10 }}</strong>折</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="seckillStock" min-width="140" label="有效期" show-overflow-tooltip>
          <template #default="scope">
            <div v-if="scope.row.expireType == 10">
              <span>领取
                <strong>{{ scope.row.expireDay }}</strong> 天内有效</span>
            </div>
            <div v-if="scope.row.expireType == 20">
              <span>
                {{ scope.row.startTimeText }}
                ~
                {{ scope.row.endTimeText }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="receiveNum" min-width="100" label="发放总数量" align="center">
          <template #default="scope">
            <div v-if="scope.row.totalNum == -1">
              <span>不限制</span>
            </div>
            <div v-else>
              <span>{{ scope.row.totalNum }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="receiveNum" min-width="100" label="已领取数量" align="center"></el-table-column>
        <el-table-column prop="sort" width="80" label="排序" align="center"></el-table-column>
        <el-table-column prop="createTime" label="添加时间" width="150"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button @click="editClick(scope.row)" type="text" size="small" icon="Edit">编辑</el-button>
            <el-button @click="deleteClick(scope.row)" type="text" size="small" icon="Delete" style="color:red;">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top:10px;margin-bottom:10px;float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
    </el-card>

  </div>
</template>
<script>
import CouponApi from "@/api/coupon.js";
import { defaultPageSize } from '@/utils/table.js'
export default {
  data() {
    return {
      formInline: {},

      couponTypeList: [
        {
          value: '10',
          label: '满减券'
        },
        {
          value: '20',
          label: '折扣券'
        },
        {
          value: '30',
          label: '核销券'
        },
        {
          value: '40',
          label: '商品券'
        },
        {
          value: '50',
          label: '购买券'
        },
        {
          value: '60',
          label: '充值券'
        }
      ],
      form: {},
      tableData: [],
      /*一页多少条*/
      pageSize: 10,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*是否加载完成*/
      loading: false,
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {
    onSubmit() {
      this.getData();
    },
    onReset(){
      this.formInline = {};
      this.getData();
    },
    /*获取列表*/
    getData() {
      let self = this;
      let Params = {};
      self.loading = true
      this.formInline['pageIndex'] = self.curPage;
      this.formInline['pageSize'] = self.pageSize;
      this.formInline['pageSorts'] = [{
        column: 'sort',
        asc: true
      }]
      CouponApi.couponList(this.formInline, true)
        .then((res) => {
          self.loading = false;
          self.tableData = res.data.records;
          self.totalDataNumber = res.data.total;
        })
        .catch((error) => {
          self.loading = false
        });
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getData();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },
    /*添加优惠券*/
    addClick() {
      this.$router.push("/discount/coupon/coupon/add");
    },
    /*修改优惠券*/
    editClick(e) {
      let self = this;
      this.$router.push({
        ///discount/coupon/coupon/index
        path: "/discount/coupon/coupon/edit",
        query: {
          id: e.couponId,
        },
      });
    },
    /*删除优惠券*/
    deleteClick(e) {
      let self = this;
      ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          self.loading = true;
          CouponApi.deleteCoupon(
            {
              id: e.couponId,
            },
            true
          )
            .then((data) => {
              self.loading = false;
              ElMessage({
                message: data.msg,
                type: "success",
              });
              self.getData();
            })
            .catch((error) => {
              self.loading = false;
            });
        })
        .catch(() => {
          self.loading = false;
        });
    },
  },
};
</script>

<style></style>
